<template>
	<view class="dynamic-detail" :style="{'height':height+'px'}">
		<view class="activity-page" v-if="pageType == 'activity'">
			<h5>
				活动{{ details.activityState == 1 ? "预约中" : "已结束" }}
			</h5>
			<image v-if="details.activityCover" :src="details.activityCover" mode="" @click="preView(details.activityCover)"></image>
			<image v-else src="../../../static/logo.png" mode=""></image>
			<view class="info">
				<view class="titel">{{ details.activityTitle }}</view>
				<view class="">
					<text class="name">举办方:</text>
					<text class="value">{{ details.activityOrganizer }}</text>
				</view>
				<view class="">
					<text class="name">地址:</text>
					<text class="value">{{ details.activityAddress }}</text>
				</view>
				<view class="">
					<text class="name">活动开始时间:</text>
					<text class="value">{{ details.startTime }}</text>
				</view>
				<view class="">
					<text class="name">活动结束时间:</text>
					<text class="value">{{ details.endTime }}</text>
				</view>
				<view class="">
					<text class="name">预约电话: </text>
					<text class="value">{{ details.bookingLine }}</text>
				</view>
				<view class="divider">活动详情</view>
				<quill-editor disabled v-if="details.activityContent" v-model="details.activityContent" class="ql-editor" />
			</view>
		</view>
		<view class="dynamic-page" v-else>
			<view class="titel">{{ titel }}</view>
			<view class="company">
				<text class="name">广投会</text>
				<text class="time">{{ publishTime }}</text>
			</view>
			<quill-editor disabled v-if="details" v-model="describe" class="ql-editor" />
		</view>
		<view class="footer" style="">
			<button type="primary" class="back-btn" @click="back">返回</button>
		</view>

	</view>
</template>

<script>
	import util from "../../../util/index.js";
	import api from "api/modules/dynamic.js";
	export default {
		data() {
			return {
				pageType: "",
				id: "",
				details: "",
				titel: "",
				describe: "",
				publishTime: "",
				height: '',
			};
		},
		onLoad(params) {
			let _this = this
			uni.getSystemInfo({
				success(res) {
					_this.height = res.windowHeight
				}
			});
			this.pageType = params.type;
			this.id = params.id;
			this.getData();
		},
		methods: {
			preView(url) {
				uni.previewImage({
					urls: [url]
				});
			},
			back() {
				uni.navigateBack()
			},
			getData() {
				switch (this.pageType) {
					case "activity":
						api
							.getActivityDetail({
								associationActivityId: this.id,
							})
							.then((res) => {
								res.data.startTime = util.formatTime(res.data.startTime);
								res.data.endTime = util.formatTime(res.data.endTime);
								this.details = res.data;
							});
						break;
					case "association":
						api
							.getAssociationDetail({
								associationNewsId: this.id,
							})
							.then((res) => {
								this.details = res.data;
								this.titel = res.data.newsTitle;
								this.publishTime = util.formatDate(res.data.publishTime);
								this.describe = res.data.newsContent;
							});
						break;
					case "branch":
						api
							.getBranchDetail({
								branchNewsId: this.id,
							})
							.then((res) => {
								this.details = res.data;

								this.titel = res.data.newsTitle;
								this.publishTime = util.formatDate(res.data.publishTime);
								this.describe = res.data.newsContent;
							});
						break;
					case "construction":
						api
							.getPartyDetail({
								associationPartyId: this.id,
							})
							.then((res) => {
								this.details = res.data;
								this.titel = res.data.partyTitle;
								this.publishTime = util.formatDate(res.data.publishTime);
								this.describe = res.data.partyContent;
							});
						break;
					case "vip":
						api
							.getMemberDetail({
								memberNewsId: this.id,
							})
							.then((res) => {
								this.details = res.data;
								this.titel = res.data.newsTitle;
								this.publishTime = util.formatDate(res.data.publishTime);
								this.describe = res.data.newsContent;
							});
						break;
				}
			},
		},
	};
</script>

<style scoped lang="less">
	page {
		.dynamic-detail {
			padding: 40rpx 32rpx;
			box-sizing: border-box;

			.activity-page {
				padding-bottom: 200rpx;

				h5 {
					text-align: center;
					margin-bottom: 20rpx;
					font-size: 36rpx;
				}

				image {
					width: 100%;
				}

				.info {
					// padding: 0 24rpx;
					color: #666;
					font-size: 28rpx;

					.titel {
						font-size: 34rpx;
						color: #000;
						margin-bottom: 30rpx;
					}

					view {
						display: flex;

						.name {
							margin-right: 30rpx;
							color: #000;
							margin-bottom: 15rpx;
							// width: 190rpx;
						}

						.value {
							max-width: 560rpx;
						}
					}

					.divider {
						display: block;
						margin-bottom: 30rpx;
						width: 100%;
						font-size: 34rpx;
						border-top: 1rpx solid #666;
						padding-top: 15rpx;
						text-align: center;
						color: #000;
					}
				}
			}

			.dynamic-page {
				padding-bottom: 200rpx;

				.titel {
					font-size: 44rpx;
					font-weight: 500;
					color: #000;
					margin-bottom: 40rpx;
				}

				.company {
					font-size: 28rpx;
					margin-bottom: 40rpx;

					.name {
						color: #0b4e9e;
						margin-right: 40rpx;
					}

					.time {
						color: #666666;
					}
				}
			}

		}

		.footer {
			box-sizing: border-box;
			width: 100%;
			display: flex;
            border-top: 1rpx solid #f6f6f6;
			button {
				margin: 24rpx 60rpx;
				flex: auto;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 40rpx;
				font-size: 32rpx;
				background-color: #0B4E9E;
			}
		}

	}
</style>
